<template>
 <div class="right">
              <p>我的订单</p>
              <div class="box">
                <div class="header1">
                  <span class="orderdate">2018-10-13</span>
                  <span class="orderid">订单号</span>
                  <span class="del"></span>
                </div>
                <div class="body">
                  <div class="poster">
                    <img src="../assets/center/1.jpg" alt="" />
                  </div>
                  <div class="order-content">
                    <div class="movie-name">毒液致命守护者</div>
                    <div class="cinema-name">自由人影城</div>
                    <div class="hall-ticket">
                      <span>8号激光厅</span>
                      <span>3排3座</span>
                    </div>
                    <div class="show-time">周六 11月17日</div>
                  </div>

                  <div class="order-price">￥86.13</div>
                  <div class="order-status">已完成</div>
                  <div class="action">查看详情</div>
                </div>
              </div>
            </div>
</template>

<script>
export default {
    name:'order',
}
</script>
<style scoped>
      .right {
        float: left;
        margin-left: 200px;
        padding-left: 40px;
        width: 922px;
        min-height: 900px;
      }
      .right p {
        margin-bottom: 35px;
        padding: 26px 0;
        border-bottom: 1px solid #e1e1e1;
      }
      .box {
        border: 1px solid #e1e1e1;
        margin: 0 40px 30px 0;
      }
      .header1 {
        background-color: #f7f7f7;
        font-size: 14px;
        padding: 16px 20px;
      }
      .orderdate {
        margin-right: 30px;
        color: #333;
        display: inline-block;
        border: 0;
      }
      .orderid {
        color: #999;
      }
      .del {
        width: 15px;
        height: 16px;
        background: url(../assets/center/1.png) no-repeat;
        float: right;
      }
      .right .body {
        padding: 20px;
        padding-right: 0;
      }
      .right .body .poster {
        border: 2px solid #fff;
        -webkit-box-shadow: 0 1px 2px 0 hsl(0deg 0% 53% / 50%);
        box-shadow: 0 1px 2px 0 hsl(0deg 0% 53% / 50%);
        margin-right: 11px;
        font-size: 0;
      }
      .right .body .poster img {
        width: 100%;
        height: 100%;
      }
      .box .body > div {
        display: inline-block;
        vertical-align: top;
      }
      .order-content {
        width: 40%;
      }
      .movie-name {
        font-size: 16px;
        font-weight: 700;
        color: #333;
        margin: 4px 0 7px -6px;
      }
      .cinema-name,
      .hall-ticket,
      .show-time {
        font-size: 12px;
        color: #999;
        margin-bottom: 4px;
      }
      .order-price {
        margin-top: 23px;
      }
      .order-status {
        margin-left: 120px;
        margin-top: 23px;
      }
      .action {
        margin-left: 120px;
        margin-top: 23px;
      }
</style>